<template>
	<view class="content">
		<view class="top-view" @tap="serch()">
			<image src="../../static/searchs.png" mode=""></image>
			<input placeholder-class="serce" placeholder="请输入商品名称" />
		</view>
		<view class="content-inner">
			<view class="left">
				<scroll-view @scroll="left_scroll" :scroll-top="leftScrollTop" :scroll-with-animation="true"
					:style="{'height': scrollHeight+'px'}" scroll-y="true" class="scroll-left"
					@scrolltoupper="left_upper" @scrolltolower="left_lower">
					<view class="scroll-left-view-item" :class="[leftCurrent==item.id ? 'left-item-active' : '' ]"
						v-for="(item,index) in leftList" :key="item.index" @click="leftMenuClick(index)">
						{{item.name}}
					</view>
				</scroll-view>
			</view><!-- left -->
			<view class="right" >
				<view class="shop_con" v-for="(item,index) in shopList" :key="index" @click.native="go_shopdetail(item)">
					<image :src="item.image" mode="aspectFill" class="im1"></image>
					<view class="v1">
						<view class="text_hidden2 fw-b shopName" style="margin: 4px 0;">
							{{item.name}}
						</view>
						<view class="">
							<text class="c-red ft_16 fw-b newPrice" v-if="type !=2">￥{{item.prices}}</text>
              <text class="c-red ft_16 fw-b newPrice" v-if="type ==2">{{item.prices}}个</text>
							<view class="ft_12 c-999 oldprice" v-if="type !=2">￥{{item.market_price}}</view>
              <view class="ft_12 c-999 oldprice" v-if="type ==2">{{item.market_price}}个</view>
						</view>
					</view>
				</view>
			</view><!-- right -->
		</view>
		<tab-bar ref='tabbar'></tab-bar>
	</view>
</template>

<script>
	import shop from "../../components/shop.vue"
	
	export default { 
		components:{
			shop
		},
		data() {
			return {
				leftCurrent: 1,
				leftScrollTop: 0,
				scrollHeight: 0,
				rightscrollTop: 0,
				leftList:[],
				
				shopList:[],
				type:1,
				current:0,
				page:1,
				shop_area: [{
					name: '平台自营'
				}, {
					name: '百货专区'
				}, {
					name: '健康专区'
				},],
			}
		},
		onLoad() {
			this.getIndex(1)
			// uni.setStorageSync('selectedIndex', 1);
		},
    onShow(){
      this.$refs.tabbar.getCount();
      uni.setStorageSync('selectedIndex', 1);
    },
		
		methods: {
			serch(){//搜索
				// if(!this.is_login()) return  //未登录 去登录
				uni.navigateTo({
					url:'../search'
				})
			},
			
			onReachBottom() {//触底获取推荐商品
				this.page+=1;
				this.getGoods(1,0);
			},
			/** 左侧菜单点击  */
			leftMenuClick(index) {
				this.leftCurrent = this.leftList[index].id
				this.rightscrollTop = 1;
				this.current = index;
				this.type = this.leftList[index].id
				this.page=1;
				this.shopList=[]
				this.getGoods(1,0)
			},
			//分类
			getIndex(){
				this.$myRequest({
					url: 'api/index',
					method:'POST',
				}).then(res => {
					if(res.data.code==1){
						let data=res.data.data						
						this.leftList = data.class_list
						this.leftCurrent=data.class_list[0].id
						this.type=data.class_list[0].id
						this.getGoods(1,0)
					}
				})
			},
			//商品
			getGoods(sort,price){
				this.$myRequest({
					url: 'api/goods/goodsList',
					method:'POST',
					data:{
						page:this.page,
            category_id:this.type,
						sort:sort,
						name:this.name,
						num:10,
					}
				}).then(res => {
					if(res.data.code==1){
						let data=res.data.data						
						if(data.goodslist.length>0){
							this.shopList.push(...data.goodslist)
							// console.log(this.shopList,'99999');
						}
					}
				})
			},
			//商品详情
			go_shopdetail(e){
				uni.navigateTo({
					url:'../shop/shopDetail?shopid='+e.id
				})
			},
			
		
		}
	}
</script>

<style lang="scss">

.content-inner{
	margin-top: 50px;
	// height: calc(100vh - 200rpx) !important;
}
.left {
	width: 200rpx;
	position: fixed;
	top: calc(100%-44px); left:0px;
	height: 90%;
	z-index: 1;
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
	overflow-y: auto;

	.scroll-left {
		height: 100% !important;
		background-color: #efefef;
	}

	.scroll-left-view-item {
		border-left: 8rpx solid #efefef;
		text-align: center;
		line-height: 100rpx;
		height: 100rpx;
		font-size: 28rpx;
	}

	.left-item-active {
		background-color: #fff;
		border-left: 8rpx solid #007aff
	}
}
.right {
	margin-left: 220rpx;
	height: 100%;
	overflow: hidden;
	background-color: #fff;
  padding-bottom:120rpx;
	.shop_con{
		width: 95%;padding-bottom: 10px;
		background-color: #FFFFFF;
		border-bottom:#ddd 1px solid;
		overflow: hidden;
		margin-bottom: 10px;
		.im1{ float: left; height: 180rpx; width: 40%;}
		.oldprice{
			text-decoration: line-through;font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 17px;
			color: #CCCCCC;
		}
		.v1{width: 55%; float: right;}
		.manjian{
			border: 1px solid #f68d8d;padding: 3px;color: #f68d8d;
		}
		.addcart{
			width: 24px;height: 24px;background-color: #ee9a20;border-radius: 50%;
			image{
				width: 12px;height: 12px;
			}
		}
	}
	.shopName{
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 20px;
		color: #333333;
	}
	.newPrice{
		font-size: 16px;
		font-family: DIN;
		font-weight: bold;
		line-height: 14px;
		color: #FF0909;
	}
}
.top-view {
	position: fixed;top:0px; left:0;
	width: 100%;
	height: 40px;
	background: #FFFFFF;
	border-bottom: #ddd 1px solid;
	opacity: 1;
	display: flex;
	align-items: center;
	z-index:1;
	image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}
	input {
		width: 100%;
		height: 40px;
		font-size: 14px;
		font-weight: 500;
		line-height: 40px;
		color: #807B7A;
		margin-left: 20px;
	}
	.serce{
		color: #807B7A;
	}
}

</style>
